<template>
<view>
<!-- calendar/remindList/remindList.wxml -->
<view class="remind-list">
  <!-- 有提醒记录 -->
  <view class="has-list" v-if="remindList.length > 0">
    <view class="header">
      <navigator hover-class="btn" url="../addRemind/addRemind">
        <button class="add-btn">添加</button>
      </navigator>
    </view>
    <view class="tips">*以下时间仅供参考，具体时间以官方为准</view>
    <view class="list-body">
      <view v-for="(remind, index) in remindList" :key="index" :class="'list-item ' + (remind.isTouchMove ? 'touch-move' : '')" @touchstart="touchStart" @touchmove="touchMove" :data-index="index">
        <view class="list-item-body">
          <view class="left">
            <view class="title">
              <view class="circle"></view>
              <text>{{remind.name}}</text>
            </view>
            <view class="time-group">
              <view class="start-time">开始：{{remind.startDay}}</view>
              <view class="end-time">结束：{{remind.endDay}}</view>
            </view>
          </view>
          <view class="right">
            <view class="left-time" v-if="remind.remindDay">
              <text>还有</text>
              <text class="left-time-num">{{remind.remindDay}}</text>
              <text>个{{remind.type}}</text>
            </view>
            <view class="complete" v-else>
              <view class="done">已完成</view>
              <button @tap="selectRemind" hover-class="btn" class="select-remind-control" :data-id="remind.id">
                办事进度查询
              </button>
            </view>
          </view>
        </view>
        <view class="delete-control" @tap.stop="delFootPath" :data-id="remind.uid" :data-index="index">
          删除
        </view>
      </view>
    </view>
  </view>
  <!-- 没有提醒记录 -->
  <view class="no-list" v-else>
    <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209162952_68962.png" class="null-msg"></image>
    <view class="null-text">没有办事，请添加</view>
    <navigator hover-class="btn" url="../addRemind/addRemind">
      <button class="add-btn">添加</button>
    </navigator>
  </view>
</view>
<view class="float-back" v-if="showTel">
  <view class="float">
    <view class="close" @tap="close">x</view>
    <view class="floar-title">此办事进度只可通过电话咨询</view>
    <view class="tel">{{tel}}</view>
    <button @tap="makePhoneCall" class="float-control">拨打电话</button>
  </view>
</view>
</view>
</template>

<script>
// calendar/remindList/remindList.js
const util = require("../../../../utils/util.js");
const app = getApp();
const dateType = {
  "1": "工作日",
  "2": "自然日"
};
let startX;
let startY;
let touchStartIndex;
let openid = "";
const localpath = "../../pages/index/";
let toggleCollection = true;

export default {
  data() {
    return {
      remindList: [],
      tel: "",
      // 电话
      showTel: false,
      scroll: false
    };
  },

  components: {},
  props: {},

  onLoad(options) {
    openid = options.openid; // util.colleation(this, "办事提醒日历");

    toggleCollection = true;
  },

  onShow() {
    util.getUrl(app.globalData.url).then(res => {
      const $getUserRemindList = {
        ac: "reminds",
        openid: openid ? openid : uni.getStorageSync("openid")
      };
      util.bstrequest('calendar.php', $getUserRemindList, "POST").then(res => {
        let allRemind = [];

        try {
          if (res.data) {
            if (res.data.data.remind) {
              let remindList = JSON.parse(JSON.stringify(res.data.data.remind));
              remindList.forEach(v => {
                v.isTouchMove = false;
                v.type = dateType[v.type];
              });
              allRemind = remindList;
            } // 已完成办事


            if (res.data.data.complete) {
              let complete = JSON.parse(JSON.stringify(res.data.data.complete));
              if (complete) complete.forEach(v => allRemind.unshift(v));
            }

            this.setData({
              remindList: allRemind
            });
          }
        } catch (e) {
          this.setData({
            remindList: ""
          });
        }
      });
    });
  },

  methods: {
    selectRemind(e) {
      let id = e.currentTarget.dataset.id;
      let data = this.remindList.filter(v => v.id === id)[0];

      if (data.ser_link_method === "2") {
        if (data.ser_url) this.setData({
          tel: data.ser_url,
          showTel: true
        });
      } else util.click2NextProgram(data, "todayRemind", localpath);
    },

    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: this.tel,
        success: result => {
          this.setData({
            showTel: false
          });
        }
      });
    },

    close() {
      this.setData({
        showTel: false
      });
    },

    touchStart(e) {
      touchStartIndex = e.currentTarget.dataset.index;
      startX = e.changedTouches[0].clientX;
      startY = e.changedTouches[0].clientY;
      this.remindList.forEach(val => {
        if (val.isTouchMove) val.isTouchMove = false;
      });
      this.setData({
        remindList: this.remindList
      });
    },

    touchMove(e) {
      let idx = e.currentTarget.dataset.index;
      let touchMoveX = e.changedTouches[0].clientX;
      let touchMoveY = e.changedTouches[0].clientY;
      let angle = this.angle({
        X: startX,
        Y: startY
      }, {
        X: touchMoveX,
        Y: touchMoveY
      });
      this.remindList.forEach((val, index) => {
        val.isTouchMove = false; // 如果移动角度大于30°返回

        if (Math.abs(angle) > 30) return;

        if (index == idx) {
          // 当前触发时间数据
          if (touchMoveX > startX) ;else val.isTouchMove = true;
        }
      });
      this.setData({
        remindList: this.remindList
      });
    },

    angle: function (start, end) {
      var _X = end.X - start.X,
          _Y = end.Y - start.Y;

      return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
    },

    delFootPath(e) {
      let id = e.currentTarget.dataset.id;
      let index = e.currentTarget.dataset.index;
      var $AppletsDelremindList = {
        id,
        ac: "del"
      };
      uni.showModal({
        title: '提示',
        content: '删除该条记录？',
        success: res => {
          if (res.confirm) {
            util.bstrequest('calendar.php', $AppletsDelremindList, "POST").then(res => {
              this.onShow();
            });
          }
        }
      });
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
page {
    background-color: #F9F9F9;
}

button {
    margin: 0;
    margin-right: 40rpx;
    margin-top: 22rpx;
}
.remind-list {
    overflow: hidden;
}
.header {
    display: flex;
    justify-content: flex-end;
}
.tips {
    margin-left: 40rpx;
    color: #b6b5b5;
    font-size: 20rpx;
}
.add-btn {
    width: 112rpx;
    height: 52rpx;
    line-height: 52rpx;
    background-color: #ff6600;
    color: #ffffff;
    font-size: 22rpx;
}

.list-item {
    display: flex;
}

.list-item-body {
    width: 90%;
    display: flex;
    justify-content: space-between;
    transform: translateX(180rpx);
    transition: all .4s;
    margin-top: 20rpx;
    margin-left: -180rpx;
    padding: 40rpx;
    padding-bottom: 28rpx;
    background-color: #ffffff;
}

.delete-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #ffffff;
    background-color: #ff0000;
    transform: translateX(180rpx);
    transition: all .4s;
}

.touch-move .list-item-body, .touch-move .delete-control {
    transform: translateX(0);
}

.title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #232323;
    font-weight: bold;
}

.circle {
    width: 16rpx;
    height: 16rpx;
    margin-right: 12rpx;
    background-color: #ff6600;
    border-radius: 50%;
}

.time-group {
    margin-top: 10rpx;
    margin-left: 26rpx;
    font-size: 22rpx;
    color: #6E6E6E;
}

.left-time {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #6E6E6E;
}

.left-time-num {
    margin: 0 6rpx;
    color: #232323;
    font-size: 42rpx;
    font-weight: bold;
}

.no-list {
    display: flex;
    flex-direction: column;
    margin-top: 96rpx;
    align-items: center;
    justify-content: center;
}

.null-text {
    margin-top: 26rpx;
    margin-bottom: 44rpx;
    font-size: 32rpx;
    color: #A2A2A2;
}

.null-msg {
    width: 321rpx;
    height: 306rpx;
}

.complete {
    font-size: 42rpx;
    color: #C8C8C8;
    font-weight: bold;
}

.select-remind-control {
    height: 54rpx;
    margin: 0;
    margin-top: 4rpx;
    border: 2rpx solid #ff6600;
    line-height: 50rpx;
    font-size: 22rpx;
    color: #ff6600;
}
.done {
    text-align: center;
}
.float-back {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgba(0,0,0,0.71);
}
.float {
    position: relative;
    width: 441rpx;
    height: 295rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 30%;
    padding: 40rpx;
    align-items: center;
    background-color: #ffffff;
}
.floar-title {
    font-size: 20rpx;
    color: #454545;
}
.tel {
    margin-top: 14rpx;
    margin-bottom: 42rpx;
    font-size: 44rpx;
}
.float-control {
    height: 63rpx;
    margin: 0;
    background-color: #ff6600;
    color: #ffffff;
    font-size: 26rpx;
}
.close {
    position: absolute;
    top: 10rpx;
    right: 30rpx;
    padding: 15rpx;
}
</style>